<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ViewUI example</title>
    <link rel="stylesheet" type="text/css" href="view-design/dist/styles/iview.css">

</head>
<body>
<div id="app">

  <template>
    <Radio-group :model.sync="button1" type="button">
        <Radio value="北京"></Radio>
        <Radio value="上海"></Radio>
        <Radio value="深圳"></Radio>
        <Radio value="杭州"></Radio>
    </Radio-group>
    <Radio-group :model.sync="button2" type="button">
        <Radio value="北京"></Radio>
        <Radio value="上海" disabled></Radio>
        <Radio value="深圳"></Radio>
        <Radio value="杭州"></Radio>
    </Radio-group>
    <Radio-group :model.sync="button3" type="button">
        <Radio value="北京" disabled></Radio>
        <Radio value="上海" disabled></Radio>
        <Radio value="深圳" disabled></Radio>
        <Radio value="杭州" disabled></Radio>
    </Radio-group>
</template>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="view-design/dist/iview.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            visible: false,
            cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ],
                model1: '',
                button1: '北京',
                button2: '北京',
                button3: '北京'
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            change (status) {
                this.$Message.info('开关状态：' + status);
            }
        }
    })
  </script>

</body>
</html>